<template>
	<view class="container">
		<canvas canvas-id="myCanvas" :style="{ width: '100%', height: state.height + 'px' }"></canvas>
		<view class="bigBtn" @click="saveImage">保存图片</view>
	</view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
	let userinfo = JSON.parse(uni.getStorageSync('userinfo'));
	state.posterUrl = 'https://fanshanjiaoss.vvv6g.cn/uploads/WechatIMG11.jpg';
	state.qrCodeUrl = userinfo.qr;
	initMergeImage();
});

const canvasId = 'myCanvas';

// 海报和二维码图片的URL
const state = reactive({
	height: 800,
	posterUrl: '',
	qrCodeUrl: ''
});
// 合并后的图片路径
const mergedImagePath = ref('');
// 初始化函数，用于合并图片并显示
const initMergeImage = () => {
	// 获取Canvas上下文
	const ctx = uni.createCanvasContext(canvasId);
	const { windowWidth, windowHeight, devicePixelRatio } = uni.getSystemInfoSync();
	// 加载海报图片
	uni.getImageInfo({
		src: state.posterUrl,
		success: (posterRes) => {
			if (windowHeight < 600) {
				state.height = 650;
			} else if (windowHeight > 600 && windowHeight < 650) {
				state.height = 750;
			} else if (windowHeight > 650 && windowHeight < 700) {
				state.height = 800;
			} else if (windowHeight > 700) {
				state.height = windowHeight;
			}
			// 加载二维码图片
			uni.getImageInfo({
				src: state.qrCodeUrl,
				success: (qrRes) => {
					const canvasWidth = windowWidth;
					const canvasHeight = windowHeight;

					// 绘制海报图片
					ctx.drawImage(posterRes.path, 0, 0, canvasWidth, parseInt((canvasWidth / 375) * posterRes.height));
					// 绘制二维码图片（假设二维码放在海报的右下角，且大小为100x100）
					const x = (canvasWidth - parseInt(130 * (windowWidth / 375))) / 2; //二维码图片X轴位置
					const y = parseInt((canvasWidth / 375) * 386); //二维码图片Y轴位置
					const w = parseInt(130 * (windowWidth / 375)); //二维码图片宽度；
					const h = parseInt(130 * (windowWidth / 375)); //二维码图片高度
					ctx.drawImage(qrRes.path, x, y, w, h);
					// 完成绘制
					ctx.draw(false, () => {
						// 导出图片为临时文件
						uni.canvasToTempFilePath({
							canvasId: canvasId,
							success: (tempRes) => {
								// 设置合并后的图片路径
								mergedImagePath.value = tempRes.tempFilePath;
							},
							fail: (err) => {
								uni.showToast({
									title: '导出图片为临时文件失败',
									icon: 'none'
								});
								console.error('导出图片为临时文件失败', err);
							}
						});
					});
				},
				fail: (err) => {
					uni.showToast({
						title: '加载二维码图片失败',
						icon: 'none'
					});
					console.error('加载二维码图片失败', err);
				}
			});
		},
		fail: (err) => {
			uni.showToast({
				title: '加载海报图片失败',
				icon: 'none'
			});
			console.error('加载海报图片失败', err);
		}
	});
};

// 处理保存图片的函数
const saveImage = () => {
	if (mergedImagePath.value) {
		// 保存图片到相册
		uni.saveImageToPhotosAlbum({
			filePath: mergedImagePath.value,
			success: () => {
				uni.showToast({
					title: '图片保存成功',
					icon: 'success',
					duration: 2000
				});
			},
			fail: (err) => {
				console.error('保存图片到相册失败', err);
				uni.showToast({
					title: '图片保存失败',
					icon: 'none',
					duration: 2000
				});
			}
		});
	} else {
		uni.showToast({
			title: '请先生成合并图片',
			icon: 'none',
			duration: 2000
		});
	}
};
</script>

<style scoped lang="scss">
.container {
	position: relative;
	z-index: 1;
	background-color: #fdd9a8;
}
.haibao {
	position: relative;
	z-index: 1;
	width: 100%;
	.pic {
		width: 100%;
	}
	.box {
		position: absolute;
		left: 50%;
		bottom: 0;
		z-index: 2;
		width: 580rpx;
		height: 580rpx;
		padding: 40rpx 100rpx 66rpx;
		background: linear-gradient(90deg, #fff7da 0%, #fef2f6 47%, #f5dde2 100%);
		box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(255, 247, 239, 0.5);
		border-radius: 24rpx;
		transform: translate(-50%, 0);
		.text {
			margin-bottom: 46rpx;
			font-size: 28rpx;
			color: #ff3942;
			line-height: 42rpx;
			text-align: center;
		}
		.ewmbox {
			width: 320rpx;
			height: 320rpx;
			padding: 32rpx;
			margin: 0 auto 24rpx;
			background: #fff;
			border-radius: 24rpx;
		}
		.erweima {
			width: 100%;
			height: 100%;
		}
		.msg {
			text-align: center;
			font-size: 28rpx;
			color: #bdbdbd;
		}
	}
}
</style>
<style>
page {
	height: auto;
	overflow: visible;
}
</style>
